<template>
	<div class="shop">
		<div class="left">
			<el-menu class="el-menu-vertical-demo" background-color="#fff" text-color="#333" active-text-color="#333">
				<el-submenu v-for="(item,index) in route" :key="index" @click="goLink(item)" :index="item.path">
					<template slot="title">
						<i :class="item.icon"></i>
						<span>{{item.name}}</span>
					</template>
					<el-menu-item-group>
						<el-menu-item v-for="(itemc,indexc) in item.children" :key="indexc" @click="goLink(itemc)" :index="itemc.path">
							<span>{{itemc.name}}</span>
						</el-menu-item>
					</el-menu-item-group>
				</el-submenu>
			</el-menu>
		</div>
		<div class="right">
			<router-view></router-view>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				route: [{
						name: "进货管理",
						path: "/erp/purchase",
						icon: "el-icon-menu",
						children: [{
								name: "集采单",
								path: "/erp/purchasePresale",
								icon: "el-icon-menu"
							},
							// {
							// 	name: "进货单",
							// 	path: "/erp/purchase",
							// 	icon: "el-icon-menu"
							// },
						]
					},
					{
						name: "销货管理",
						path: "/erp/salesList",
						icon: "el-icon-menu",
						children: [
							// {
							// 	name: "销货单",
							// 	path: "/erp/salesList",
							// 	icon: "el-icon-menu"
							// },
							{
								name: "销货单",
								path: "/erp/purchaseRefund",
								icon: "el-icon-menu"
							},
							{
								name: "调拔单",
								path: "/erp/salesList1",
								icon: "el-icon-menu"
							},
							{
								name: "回购单",
								path: "/erp/salesList2",
								icon: "el-icon-menu"
							},
							{
								name: "销货退货单",
								path: "/erp/salesList3",
								icon: "el-icon-menu"
							},
							// {
							// 	name: "集采单",
							// 	path: "/erp/salesList4",
							// 	icon: "el-icon-menu"
							// }
						]
					}
				]
			}
		},
		methods: {
			goLink(item) {
				this.$router.push({
					path: item.path
				})
			}
		}
	}
</script>
<style scoped>
	.shop {
		flex: 1;
	}
	
	.left {
		width: 200px;
		background-color: #fff;
		overflow: hidden;
		height: 100%;
		border-right: 1px solid #f2f2f2;
		box-sizing: border-box;
	}
	
	.right {
		background-color: fff;
		overflow: hidden;
		padding: 0 24px;
		box-sizing: border-box;
		width: 1200px;
	}
	
	.shop {
		display: flex;
		flex-direction: row;
	}
</style>